<template>
    <div class="home">
        <!-- 标题开始 -->
        <div class="title">易洁家政</div>
        <!-- 标题结束 -->
        <!-- 轮播图开始 -->
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in carousels" :key="item.id">
                    <img width="100%" height="160px" :src="item.url" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 轮播图结束 -->
        <!-- 栏目信息开始 -->
        <div class="category">
            <van-grid column-num='6' :border="false"> 
                <van-grid-item @click=toHamdler(index,item.id) v-for="(item,index) in categorys" :key="index" :icon="item.icon" :text="item.name" />
            </van-grid>
        </div>
        <!-- 栏目信息结束 -->
        <!-- 产品信息开始 -->
        <div class="product" >
            <div class="productList" v-for="item in products" :key="item.id">
                    <img width="80%" height="45%" :src="item.photo" alt="">
                <div class="name">{{item.name}}</div>
                <div class="description">{{item.description}}</div>
            </div>
        </div>
        <!-- 产品信息结束 -->
    </div>
</template>

<script>
//引入axios
import {get} from '@/http/axios.js'
export default {
    data(){
        return {
            carousels:[],
            list:{
                page:1, 
                pageSize:6
            },
            categorys:[],
            products:[],
            list:{
                 page:1, 
                pageSize:10
            }
        }
    },
    methods:{
        //查询所有轮播图信息
        findAllCarousel(){
            //异步操作
            get('/carousel/findAll').then(res=>{
                //将从后台拿到的轮播图信息存储到carousels
                this.carousels = res.data.data
            })
        },
        //查询所有分类信息
        findAllCategory(){
            get('/productCategory/pageQuery',this.list).then(res=>{
                // console.log(res.data.data.list,'=======');
                this.categorys = res.data.data.list
            })
        },
        //点击跳转
        toHamdler(index,id){
            this.$router.push({path:'/manager/productList',query:{index,id}})
        },
        // 查询所有产品信息
        findAllProduct(){
            get('/product/pageQuery',this.list).then(res=>{
                // console.log(res.data.data.list);
                this.products = res.data.data.list
            })
        }
    },
    created(){
        this.findAllCarousel()
        this.findAllCategory()
        this.findAllProduct()
    }
}
</script>

<style scoped>
.home .title {
    height:130px;
    background-image: linear-gradient(90deg,#7579ff,#bf73ff);
    color: #fff;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    font-size: 29px;
    padding-top:5px;
    position: relative;
}
.home .swipe {
   width:90%;
   height:160px;
   position: absolute;
   top:136px;
   left:50%;
   transform:translate(-50%,-50%);
   box-shadow: 0 0 10px 0 #aaa;
}
.home .swipe img {
   border-radius: 6px;
}
.home .category {
    margin-top: 100px;
    cursor: pointer;
}
.home .product{
    margin-top: 20px;
    height: 980px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-bottom: 50px;
}
.home .product .productList{
    height: 160px;
    width: calc(50% - 30px);
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 #eadaff;
     border-radius: 5px;
    justify-content: space-around;
    margin: 0 auto;
    padding: 0 2px;
}
.home .product .productList  img{
     border-radius: 5px;
     margin-top: 17px;
}
.home .product .productList .name{
    margin-top: 5px;
    font-size: 18px;
}
</style>
